<script setup>
import { ref, reactive, computed, onMounted } from 'vue';
const items = ref([
  {
    id: 1,
    text: "+49 (69) 6986 9881",
    icon: "../../assets/images/telephone.png"
  },
  {
    id: 2,
    text: "info@oss-global.de",
    icon: "../../assets/images/email.png"
  },
  {
    id: 3,
    text: "Hugo-Junkers-Str. 3 60386 Frankfurt am Main",
    icon: "../../assets/images/address.png"
  }
]);
const requireImage = (url) => {
  return new URL(url, import.meta.url).href
}
const ruleForm = reactive({
  interst: '',
  email: '',
  firstName: '',
  lastName: '',
  company: '',
  location: '',
  telephone: '',
  request: '',
})
const agree = ref(false)
const rules = reactive({
  interst: [
    { required: true, message: 'Please choose your area of interst', trigger: 'blur' },
    { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
  ],
  email: [
    { required: true, message: 'Please enter your email', trigger: 'blur' },
    { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
  ],
  firstName: [
    { required: true, message: 'Please enter your first name', trigger: 'blur' },
    { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
  ],
  lastName: [
    { required: true, message: 'Please enter your last name', trigger: 'blur' },
    { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
  ],
  company: [
    { required: true, message: 'Please enter your company', trigger: 'blur' },
    { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
  ],
  location: [
    { required: true, message: 'Please select your location', trigger: 'blur' },
    { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
  ],
  telephone: [
    { required: true, message: 'Please enter your telephone', trigger: 'blur' },
    { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
  ],
  request: [
    { required: true, message: 'Please describe your request', trigger: 'blur' },
    { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
  ],
})
const ruleFormRef = ref()
const submitForm = async (formEl) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
    } else {
      console.log('error submit!', fields)
    }
  })
}
</script>
<template>
  <div class="contact-us">
    <img src="@/assets/images/about-us.png" alt="">
    <div class="bread-crumb">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">Home</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/ContactUs' }">Contact Us</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="contact-form">
      <div class="form-main">
        <div class="title-one title-pub">Contact Us</div>
        <div class="contact-info">
          <div class="item" v-for="(item, index) in items" :key="item.id">
            <img :src="requireImage(item.icon)" alt="">
            <p class="text">{{ item.text }}</p>
          </div>
        </div>
        <div class="title-two title-pub">Please tell us a bit more and wewill get back to you asap</div>
        <el-form ref="ruleFormRef" style="max-width: 1200px" :model="ruleForm" :rules="rules" label-width="auto">
          <el-row :gutter="38">
            <el-col :span="12">
              <el-form-item label=" " prop="interst">
                <el-input v-model="ruleForm.interst" placeholder="Please choose your area of interst" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label=" " prop="email">
                <el-input v-model="ruleForm.email" placeholder="Email" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="38">
            <el-col :span="12">
              <el-form-item label=" " prop="firstName">
                <el-input v-model="ruleForm.firstName" placeholder="First name" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label=" " prop="lastName">
                <el-input v-model="ruleForm.lastName" placeholder="Last name" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="38">
            <el-col :span="12">
              <el-form-item label=" " prop="company">
                <el-input v-model="ruleForm.company" placeholder="Company" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label=" " prop="location">
                <el-input v-model="ruleForm.location" placeholder="Please select your location" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="38">
            <el-col :span="12">
              <el-form-item label=" " prop="telephone">
                <el-input v-model="ruleForm.telephone" placeholder="Telephone" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label=" " prop="request" class="request-box">
                <el-input type="textarea" v-model="ruleForm.request" placeholder="Please describe your request" :style="{
                  '--el-border-color': 'rgba(255,255,255,0.0)',
                  '--el-input-focus-border-color': 'rgba(255,255,255,0.0)',
                  '--el-input-focus-border-width': '0px',
                  '--el-input-hover-border-color': 'rgba(255,255,255,0.0)',
                  '--el-input-hover-border-width': '0px',
                  '--el-input-bg-color': 'rgba(0,0,0,0.8)'
                }" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item class="check-box">
                <el-checkbox value="agree">
                  <span class="text-wrap">
                    Yes, I would like to receive news, product updates and special offers from Kuehne+Nagel. I can
                    unsubscribe at any time. In our Privacy Policy you will find further information about how we use
                    personal data.
                  </span>
                </el-checkbox>
              </el-form-item>
            </el-col>
          </el-row>


          <el-row>
            <el-col :span="24">
              <el-form-item class="btn-box">
                <el-button @click="submitForm(ruleFormRef)">
                  Submit your request
                </el-button>
              </el-form-item>
            </el-col>

          </el-row>
        </el-form>
      </div>
    </div>
  </div>
</template>
<style scoped lang='scss'>
.contact-us {
  .bread-crumb {
    width: 100%;
    height: 43px;
    background: #F2F2F2;
    display: flex;
    align-items: center;

    :deep(.el-breadcrumb) {
      max-width: 1200px;
      width: 1200px;
      margin: 0 auto;

      .el-breadcrumb__item {
        .el-breadcrumb__inner.is-link {
          font-size: 16px;
          color: #ccc;
        }

        &:last-child {
          .el-breadcrumb__inner {
            color: #333;
          }
        }
      }
    }
  }

  .contact-form {
    width: 100%;
    background: #fff;
    .form-main {
      max-width: 1200px;
      width: 1200px;
      margin: 0 auto;

      .title-two {
        margin: 40px 0px 0px 0px;
      }

      .title-pub {
        font-weight: bold;
        padding: 40px 0px 31px 0px;
        font-size: 32px;
        color: #333;
        border-bottom: 1px solid #E5E5E5;
      }

      .contact-info {
        display: flex;
        column-gap: 21px;
        margin: 31px 0px 0px 0px;

        .item {
          width: 386px;
          height: 181px;
          background: #fff;
          box-shadow: 0px 6px 12px 1px rgba(108, 108, 108, 0.16);
          border-top: 2px solid #5B108E;
          box-sizing: border-box;
          display: flex;
          align-items: center;
          flex-direction: column;
          padding: 27px 0px 0px 0px;

          img {
            width: 66px;
            height: 66px;
          }

          .text {
            margin: 25px 0px 0px 0px;
          }
        }
      }
    }

    :deep(.el-form) {
      margin: 21px 0px 0px 0px;

      .el-row {
        .el-col {
          border-radius: 0px;

          .el-form-item {
            width: 100%;
            height: 66px;
            background: #EDEFF1;
            display: flex;
            padding: 0px 24px;
            box-sizing: border-box;
            align-items: center;

            .el-form-item__label {
              padding: 0px;
            }

            .el-input__wrapper {
              padding: 0px;
              background: #EDEFF1;

              .el-input__inner {
                border: 2px solid #EDEFF1;
              }
            }

            .el-checkbox {
              display: flex;
              align-items: baseline;
            }

            .text-wrap {
              white-space: normal;
              word-break: break-word;
              line-height: 20px;
              font-size: 16px;
              color: #000000;
            }

            &.is-error .el-textarea__inner {
              box-shadow: 0 0 0 1px #EDEFF1 inset;
            }
          }

          .el-form-item.check-box {
            background: #fff;
            padding: 0px 24px 0px 0px;
          }

          .el-form-item.request-box {
            padding: 24px;
            height: 292px;
            align-items: baseline;

            .el-form-item__content {
              height: 100%;

              .el-textarea {
                height: 100%;

                .el-textarea__inner {
                  height: 100%;
                  resize: none;
                  background: #EDEFF1;
                  border: none !important;
                }
              }
            }
          }

          .el-form-item.btn-box {
            background: #fff;
            margin: 18px 0px 57px 0px;
            .el-form-item__content {
              justify-content: center;

              .el-button {
                color: #fff;
                font-size: 18px;
                font-weight: bold;
                width: 324px;
                height: 67px;
                background: #5B108E;
                border-radius: 0px 0px 0px 0px;
              }
            }
          }

        }
      }

    }
  }
}
</style>
